import React from 'react';
import './index.css';
import ABoutHeader from "../../Component/ABoutHeader";
import "./index.css";
import FeekBackSVG from "../../Common/svg/FeekBack";
import { Input, Radio , Button } from 'antd';
import UpCamera from '../../Component/UpCamera';
import Feedback from '../../Server/Feedback';
import UserCheck from '../../utils/UserCheck';
const { TextArea } = Input;

export default class FeedBack extends React.Component{
    constructor(props){
        super();
        this.state = {
            value: 0,
            text:"",
            img1:"",
            img2:"",
            phone:"",

            err:""
        };
    }
    
      onChange = e => {
        // console.log('radio checked', e.target.value);
        this.setState({
          value: e.target.value,
        });
    };

    ChangePic1(data){
        this.setState({
            img1:data.originFileObj
        });
    }

    ChangePic2(data){
        this.setState({
            img2:data.originFileObj
        });
    }

    SetErr(err){
        this.setState({
            err
        });
    }

    ClearErr(){
        this.setState({
            err:""
        });
    }

    Save(){
        this.ClearErr();
        Feedback.Feedback(UserCheck.GetUserID(),this.state.text,
        this.state.value,this.state.phone,this.state.img1,this.state.img2)
        .then(response=>{
            this.SetErr("提交成功");
        },reject=>{
            this.SetErr(reject.msg);
        });
    }

    render(){
        let phoneNode="";
        if(this.state.value===0){
            phoneNode=(
                <div className="FeekBack_Out_Input">
                        <span className="FeekBack_Out_Input_Title">手机号</span>
                        <div className="FeekBack_Out_Body">
                            <Input prefix="" suffix="" placeholder="请填写手机号码便于联系您" onChange={e=>this.setState({phone:e.target.value})}/>
                        </div>
                    </div>
            );
        }
        return(
            <div style={{padding:"3rem"}}  className="FeekBack_Out">
                <div>
                    <ABoutHeader/>
                </div>
                <div>
                    <div className="Question_Title">
                    <span className="Question_TitleSVG">
                    <FeekBackSVG/></span>反馈</div>
                    <div className="FeekBack_Out_Title">问题与意见</div>
                    <div>
                        <TextArea rows={5} style={{resize:"none",background:"#F4F5F9"}} 
                             placeholder="请输入不少于10个字的描述，您的反馈将帮助我们更好的改进"
                             onChange={e=>this.setState({text:e.target.value})}/>
                    </div>
                    <div className="FeekBack_Out_Title">上传图片</div>
                    <div className="FeekBack_Out_Camera">
                        <div>
                            <UpCamera Change={e=>this.ChangePic1(e)} title="上传图片" src=""/>
                        </div>
                        <div>
                            <UpCamera Change={e=>this.ChangePic2(e)} title="上传图片" src=""/>
                        </div>
                    </div>
                    <div class="FeekBack_Out_Title_S">联系电话调查：是否愿意接受电话回访</div>
                    <div class="FeekBack_Out_Radio">
                        <Radio.Group onChange={this.onChange} value={this.state.value}>
                            <Radio value={0}>愿意</Radio>
                            <Radio value={1}>不愿意</Radio>
                        </Radio.Group>
                    </div>
                    {phoneNode}
                    <div>
                        <font color="red">{this.state.err}</font>
                    </div>
                    <div className="FeekBack_Out_Submit">
                        <Button onClick={e=>this.Save(e)}>提交反馈</Button>
                    </div>
                </div>
            </div>
        )
    }
}